<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>merchantWait</title>

<style type="text/css" id="audit_flag">
	.tn-box-color-1 {
    	background: #ffe691;
    	border: 1px solid #f6db7b;
	}
	.tn-box {
    	width: 360px;
    	position: relative;
    	margin: 0 auto 20px auto;
    	padding: 25px 15px;
    	text-align: left;
    	border-radius: 5px;
    	box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);
    	opacity: 0;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	    filter: alpha(opacity=0);
	    cursor: default;
	    display: none;
	}
	.tn-progress {
	    width: 0;
	    height: 4px;
	    background: rgba(255,255,255,0.3);
	    position: absolute;
	    bottom: 5px;
	    left: 2%;
	    border-radius: 3px;
	    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 -1px 0 rgba(255,255,255,0.6);
	}
   	
   	.info_status_li{
		list-style: none;
		margin-top:25px;
		margin-bottom:25px;
	}
	.info_status_a{
		color: #fff;
	}
	
    .info_right {
      float: right;
      width: 70%;
      height: 80%;
    }
    .info_right_css { background-color: #fff; }
    .info_header_css {
    	margin-top:-20px;
    	width: 100%;
        height: 100px;
    	background-color: rgb(26,188,156);
    	color: #fff;
    	text-align: center;
        vertical-align: middle;
        cursor: pointer;
        font-size: 36px;
        line-height: 36px;
        font-weight: 20px;
        border: 0;
        outline: 0;
   	}
   	.info-table{
   		border-collapse:collapse;  
    	border-spacing:0;  
   	}
   	.menu-ul{
   	list-style:none;
   	padding-left:0px;
   	width:100%;
   	height:50px;
   	background-color:#0AE;
   	margin-top:0px;
   	margin-right:200px;
   	}
   	.menu-ul li{
   	padding-top:-20px;
   	float:left;
   	magrin-right:700px;
   	padding-top:0px;
   	}
   	.menu-ul>li>a{
   	float:left;
   	padding-left:200px;
   	text-decoration:none;
   	
   	}
   	.btn-green{
   			text-align: center;
            vertical-align: middle;
            cursor: pointer;
            width: 120px;
            height: 40px;
            font-size: 18px;
            line-height: 36px;
            color: #fff;
            font-weight: 0;
            border: 0;
            outline: 0;
            background: #0AE;
            border-radius: 4px;
   	}
   	.header-text{
   		padding-top:40px;
   	}
   	.info_home_css {
   		float: right;
   	}
   	.title-div{
   		width:100%;
   	}
   	.center-div{
       margin-left: 550px;
    	width: 400px;
    	font-size: 24px;
   	}
   	.center-table{
   	margin-top:20px;
   	margin-left:450px;
   	border-collapse:collapse;  
    border-spacing:0;  
    text-align: center;
    vertical-align: middle;
   	}
   	td{
   	 text-align: center;
    vertical-align: middle;
   	}
   	.status-a{
   	  text-decoration:none;
   	  vertical-align: middle;
   	}
   	.btn-blue{
   	 		text-align: center;
            vertical-align: middle;
            cursor: pointer;
            width: 60px;
            height: 30px;
            font-size: 16px;
            line-height: 36px;
            color: #fff;
            font-weight: 0;
            border: 0;
            outline: 0;
            background: #0AE;
            border-radius: 4px;
   	}
   	i{
  display:none;
  background:#f00;
  border-radius:50%;
  width:10px;
  height:10px;
  top:0px;
  right:0px;
  position:absolute;
}
.show{
display:block
}
.hid{
	display:none;
}
</style>
</head>
<body>
	<div class="info_header_css">
		<center><div class="header-text">O2O Admin</div></center>
	</div>
	
	<div class="info_left">
		<div class="info_left_css">
			<ul class="menu-ul">
				<li class="info_status_li">	<a href="/admins/merchant/all" class="info_status_a">Merchant info</a> </li>
				<li class="info_status_li">	<a class="info_status_a" style="margin-left:700px">welcome：${sessionScope.name}</a> </li>
			</ul>
		</div>
	</div>
	
	<div class="title-div"><div class="center-div">Audit list <span style="position:relative;"><i></i></span></div></div>
	<table border="1" class="center-table" id="auditList">
		<tr>
			<th style="width:200px;">name</th>
			<th style="width:200px;">status</th>
		</tr>
		<c:forEach items="${merchants }" var="merchant">
			<tr>
				<td style="width:200px;">${merchant.name }</td>
				<td style="width:200px;">
					<a href="${pageContext.request.contextPath}/merchant/audit/wdetail?name=${merchant.name }" class="status-a"><button class="btn-blue">${merchant.status }</button></a><br>
				</td>
			</tr>
		</c:forEach>
	</table>
	<c:if test="${not empty flag}">
		<div class="tn-box tn-box-color-1">
			<p>审核保存成功!</p>
			<div class="tn-progress"></div>
		</div>
	</c:if>
	
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
		    <script type="text/javascript">
        $(function(){
             $(document).ready(function(){
            	 var version = new Date().getTime();
                function getAudit(){
                    $.ajax({
                        type:"GET",
                        url:"/admins/merchant/api/audit/all",
                        dataType: "json",
                        success: function(msg){
                        	version = new Date().getTime();
                        	console.log(msg);
                             $("#auditList tr").not(":first-child").remove(); 
                             $.each(msg.data, function(index, content){
                                var tr = $("<tr></tr>");
                                var link = $("<a href=/admins/merchant/audit/wdetail?name="+content.name+"><button class='btn-blue'>"+"audit"+"</button></a>").attr("class","status-a");
                                var td = $("<td></td>").attr("style","width:200px");
                                tr.append($("<td></td>").text(content.name));
                                td.append(link);
                                tr.append(td);
                                $("#auditList").append(tr);
                            });  
                        }
                    })
                     .done(function(msg){ 
                    })
                }
                
                setInterval(function(){getFlag();},1000);
                //setInterval(function(){getAudit();},5000);
                
                function show(){
                	//console.log("666");
                	var s = setInterval(function(){
                        $("i").addClass("show");},300);
                    setTimeout(function(){
                             clearInterval(s);
                          },300);
                          
                         
                    var t =  setInterval(function(){
                              $("i").addClass("hid");},3000);
                     setTimeout(function(){
                                   clearInterval(t);
                                },3000);  
           			
                }
                
                
                function getFlag(){
                	
               	$.ajax({
               		type:"GET",
               		url:"/admins/merchant/api/audit/status/version",
               		 dataType: "json"	
               	}).done(function(msg){
               		console.log(msg);
               		if(version<msg.version){
               			show();
               			
               			getAudit()
               		}
               		
               	})
               }
            });
        })
    </script>
		
	
</body>
</html>